import React, { useState, useRef } from "react";
import { Form, message, Modal, Steps, Button } from "antd";

import InfoForm from "./InfoForm";
import AuthForm from "./AuthForm";
// import request from '@/utils/request'
// import { useAppSelector } from '@/utils/hooks'

import type { RecordItem, Params } from "../type";
import { PlusOutlined } from "@ant-design/icons";
import request from "@/utils/request";

interface Props {
	record?: RecordItem;
	doSearch: (params: Params) => void;
}

const AddModal: React.FC<Props> = ({ doSearch }) => {
	const [addVisible, setAddVisible] = useState(false);
	const [form] = Form.useForm();
	const [current, setCurrent] = useState(0);
	const [selectedRecord, setSelectedRecord] = useState<RecordItem>();
	const infoFromRef = useRef<any>(null);
	const authFromRef = useRef<any>(null);


	const handleOk = async () => {
		const infoValueP = infoFromRef.current?.validateFields();
		const authValueP = authFromRef.current?.validateFields();

		Promise.all([infoValueP, authValueP])
			.then(([infoValue, authValue]) => {
				request('tenantManageAdd',{
					data:{...infoValue, ...authValue},
				}).then(res => {
					if (res.code === 0) {
						message.success(res.message || '添加成功')
						doSearch({} as any)
						handleCancel()
					}
				})
			})
			.catch(() => {});
	};

	const handleCancelClick = () => {
		Modal.confirm({
			title: "提示",
			content: `是否确认取消本次操作？取消后将需要重新编辑`,
			onOk() {
				handleCancel();
			}
		});
	};

	const handleCancel = () => {
		form.resetFields();
		setAddVisible(false);
		setCurrent(0);
	};

	const onChange = (value: number) => {
		if (value === 1) {
			infoFromRef.current
				?.validateFields()
				.then(() => {
					setCurrent(value);
				})
				.catch(() => {});
		} else {
			setCurrent(value);
		}
	};

	const handleNext = () => {
		infoFromRef.current
			?.validateFields()
			.then(() => {
				setCurrent(1);
			})
			.catch(() => {});
	};

	const handlePrev = () => {
		setCurrent(0);
	};

	const items = [
		{ title: "添加租户", content: <InfoForm ref={infoFromRef} /> },
		{ title: "租户授权", content: <AuthForm ref={authFromRef} selRecord={selectedRecord}/> }
	];

	const infoFooter = [
		<Button key="1" onClick={handleCancelClick}>
			取消
		</Button>,
		<Button key="2" type="primary" onClick={handleNext}>
			下一步
		</Button>
	];

	const authFooter = [
		<Button key="3" onClick={handlePrev}>
			上一步
		</Button>,
		<Button key="4" type="primary" onClick={handleOk}>
			确认
		</Button>
	];

	return (
		<div>
			<Button
				type="primary"
				icon={<PlusOutlined />}
				onClick={() => {
					setSelectedRecord(undefined);
					setAddVisible(true);
				}}
			>
				添加
			</Button>
			<Modal
				title="添加用户"
				open={addVisible}
				width={660}
				destroyOnClose
				maskClosable={false}
				onCancel={handleCancelClick}
				footer={current === 0 ? infoFooter : authFooter}
			>
				<div className="centerCenter mb24">
					<Steps style={{ width: 300 }} current={current} onChange={onChange} items={items} />
				</div>
				<div className="steps-content" style={{ display: current === 0 ? "" : "none" }}>
					{items[0].content}
				</div>
				<div className="steps-content" style={{ display: current === 1 ? "" : "none" }}>
					{items[1].content}
				</div>
			</Modal>
		</div>
	);
};

export default AddModal;
